<template>
	<view v-if="list" class="channel">
		<view style="width: 50vw;height: 50vw;" class="channel-li" v-for="(item,index) in list" :key="index"
			@click="jumpDetail(item.tab,item.cateid,item.catename)">
			<cover-image mode="widthFix" :src="item.icon"></cover-image>
			<text class="text">{{"#"+item.catename+"#"}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Channel",
		data() {
			return {
				list: [],
			};
		},
		methods: {
			jumpDetail(tab, cateid, catename) {
				uni.showLoading({
				    title: '加载中'
				});
				if (tab) {
					uni.request({
						url: `https://apis.netstart.cn/vmovier/cate/getPostByTab?p=1&size=10&tab=${tab}`,
						success: (res) => {
							this.$store.commit('updateChannel', {
								channelArr: res.data.data,
								catename: catename,
							});
							uni.navigateTo({
								url: '../../pages/alias/alias',
								complete: () => {
									uni.hideLoading();
								}
							})
						}
					})
				} else if (cateid) {
					uni.request({
						url: `https://apis.netstart.cn/vmovier/cate/getPostInCate?p=1&size=10&cateid=${cateid}`,
						success: (res) => {
							this.$store.commit('updateChannel', {
								channelArr: res.data.data,
								catename: catename,
							});
							uni.navigateTo({
								url: '../../pages/alias/alias',
								success: () => {
								}
							})
						}
					})
				}
			}
		},
		created() {
			uni.request({
				url: 'https://apis.netstart.cn/vmovier/cate/getList',
				success: (res) => {
					this.list = res.data.data;
				}
			})
		}
	}
</script>

<style lang="less">
	.channel {
		display: flex;
		flex-wrap: wrap;

		.channel-li {
			position: relative;

			.text {
				position: absolute;
				top: calc(50% - 20rpx);
				left: calc(50% - 50rpx);
				color: white;
				font-weight: bold;
				font-size: 30rpx;
			}
		}
	}
</style>
